<template>
  <!-- <li> -->
  <div
    class="child-item"
    :class="{ 'child-item-active': isActive }"
  >
    <div
      v-if="nodeData.is_catalogue"
      class="flc detail cursor-pointer"
      @click="setCurrent"
    >
      <svg-icon
        v-if="hasChild && hasArrow"
        name="form-arrow"
        class="arrow mr-5px"
        :class="{ show: nodeData.open }"
        @click.stop="toggleTree"
      />
      <div
        class="flex-1  flex justify-start"
        :class="{
          'text-[#4673EE]': isActive
        }"
      >
        <div class="truncate max-w-180px">
          {{ nodeData.name }}
        </div>
        <sound-wave v-if="isActive"></sound-wave>
      </div>
      <div :class="{
        'text-[#4673EE]': isActive
      }">
        {{ formateTime(nodeData.time_duration) }}
      </div>
    </div>
    <trans v-if="hasChild && nodeData.open">
      <div :class="{ 'ml-20px': node.is_catalogue }">
        <child-node-item
          v-for="(x, i) in nodeData.children"
          :key="i"
          v-model:node="nodeData.children[i]"
        >
        </child-node-item>
      </div>
    </trans>
  </div>
</template>

<script lang="ts" setup name="ChildNodeItem">
import { formateTime } from '@/utils/index'

const props = defineProps(['node'])

const emit = defineEmits(['update:node'])

const nodeData = computed({
  get: () => props.node,
  set: (v) => emit('update:node', v),
})
const current: LooseObject = inject('current')
const nodeClick: LooseFunction = inject('nodeClick')
const getParent: LooseFunction = inject('getParent')

const toggleTree = () => {
  nodeData.value = { ...nodeData.value, open: !nodeData.value.open }
}

const hasChild = computed(() => nodeData.value.children && nodeData.value.children.length > 0)

// 判断当前节点是否播放中
const isActive = computed(() => {

  const { id, is_catalogue } = current.value || {}
  if (is_catalogue) return nodeData.value.id === id
  const parent: [LooseObject] = getParent()
  for (let i = parent.length - 1; i >= 0; i--) {
    if (parent[i].is_catalogue) {
      return nodeData.value.id === parent[i].id
    }
  }
  return false
})

const hasArrow = computed(() => {
  let hasChild = false
  const fn = (arr) => {
    arr.forEach((o) => {
      if (o.is_catalogue) {
        hasChild = true
        throw hasChild
      } else if (o.children) {
        fn(o.children)
      }
    })
  }
  try {
    fn(nodeData?.value?.children || [])
    return hasChild
  } catch (e) {
    return hasChild
  }
})

const setCurrent = useDebounceFn(() => {
  current.value = nodeData.value
  nodeClick(nodeData.value)
}, 200)

</script>

<style lang="scss" scoped>
.child-item {
  font-size: 14px;
  color: #3B5379;
  font-weight: 600;

  .detail {
    padding: 10px 14px;
    border: 1px solid transparent;

    &:hover {

      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.6);
    }
  }

  .arrow {
    font-size: 10px;
    transition: transform 0.3s;

    &.show {
      transform: rotate(-180deg);
    }
  }
}
</style>